import React, { useEffect, useState, useMemo } from "react";
import { FormView, Card, Block, Switch } from "@ct0/ui";
import { createUseStyles } from "react-jss";
import PanelTemplate from "./panelTemplate";

const useStyles = createUseStyles({});
const { useFormView, extend } = FormView;

export default function FormViewPanel() {
  const [showError, setShowError] = useState(false);
  const [form, isValid, formData] = useFormView([
    {
      label: "select类型",
      type: "select",
      key: "select",
      defaultValue: "MEDIUM",
      required: true,
      options: [
        { label: "LOW-1", value: "LOW" },
        { label: "MEDIUM-2", value: "MEDIUM" },
        { label: "HIGH-2", value: "HIGH" },
      ],
    },
    {
      label: "multi_select",
      type: "multi_select",
      key: "multi_select",
      meta: {
        search: true,
        disabledValueOptions: [
          { label: "test1", value: "test1" },
          { label: "test2", value: "test2" },
          { label: "test3", value: "test3" },
        ],
      },
      required: true,
      defaultValue: ["test1", "test3", 1],
      options: [
        { label: "One", value: 1 },
        { label: "Two", value: 2 },
        { label: "Three", value: 3 },
      ],
    },
    {
      label: "tag 类型",
      type: "tag",
      key: "tag",
      options: [
        { value: "tag1", label: "tag1" },
        { value: "tag2", label: "tag2" },
      ],
      meta: {
        maxLength: 5,
        getPopupContainer: (node) => {
          return node.parentNode;
        },
      },
    },
    {
      label: "黑色 labelTips",
      type: "string",
      key: "a",
      labelTips: (
        <div>
          <div>提示信息</div>
          <div>提示信息11</div>
        </div>
      ),
    },
    {
      note: "提示信息",
      label: "number类型",
      type: "number",
      key: "n",
      placeholder: "请输入number类型",
      meta: {
        min: 0,
        max: 65535,
      },
      required: true,
    },
    {
      label: "string类型",
      type: "string",
      key: "value",
      placeholder: "请输入string类型",
      required: true,
    },
    {
      label: "boolean类型",
      type: "boolean",
      key: "boolean",
    },
    {
      label: "cascader类型",
      type: "cascader",
      key: "cascader",
      options: [
        { label: "label1", value: "1" },
        {
          label: "label2",
          value: "2",
          children: [{ label: "label2.1", value: "3" }],
        },
      ],
    },
    {
      label: "时间选择",
      type: "datetime",
      key: "datetime",
    },
  ]);

  const data = {
    title: "FormView",
    descriptions: ["快速生成Form表单"],
    content: {
      title: "代码演示",
      children: [
        {
          title: "控制表单校验错误信息是否显示",
          component: (
            <>
              <Switch value={showError} onChange={setShowError} />
              &nbsp;
              <span>{showError ? "显示" : "隐藏"}</span>
            </>
          ),
        },
        {
          title: "非受控Form",
          component: (
            <Card>
              <FormView
                form={form}
                showError={showError}
                title="Form表单title"
              />
            </Card>
          ),
          codeSnippet: `import { FormView } from "@ct0/ui";

<FormView form={form} showError={showError} title="Form表单title" />`,
        },
      ],
    },
    componentApi: [
      {
        param: "title",
        description: "表单标题",
        type: "string",
      },
      {
        param: "showError",
        description: "是否显示校验错误信息",
        type: "boolean",
        default: "false",
      },
      {
        param: "column",
        description: "列数量",
        type: "number",
        default: "1",
      },
      {
        param: "labelWidth",
        description: "label宽度",
        type: "string | number",
      },
      {
        param: "style",
        description: "样式",
        type: "CSSProperties",
      },
      {
        param: "labelTips",
        description: "label的提示内容",
        type: "ReactNode",
      },
      {
        param: "onChange",
        description: "表单值改变时的回调函数",
        type: "function",
      },
    ],
  };
  return <PanelTemplate {...data} />;
}
